import React from "react";
import upUrl from "../../assets/images/video/up.png";
import style from "./style.module.scss";
import { VideoList } from "../../view/Video";

interface PropsType {
  v: VideoList;
  width: string;
  touchMove?: (progress: number) => void;
  touchStart?: (progress: number) => void;
}
const clientX = document.documentElement.clientWidth;
export const VedioInfo: React.FC<PropsType> = ({ v, width, touchMove }) => {
  const onTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
    const touch = e.changedTouches[0];
    if (touch) {
      const progress = touch.clientX / clientX;
      touchMove && touchMove(progress);
    }
  };
  const onTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
    const touch = e.changedTouches[0];
    if (touch) {
      const progress = touch.clientX / clientX;
      touchMove && touchMove(progress);
    }
  };
  return (
    <div className={style["vedio-info"]}>
      <div className={style["info"]}>
        <h3 className={style["title"]}>{v.title}</h3>
        <div className={style["content"]}>{v.abstracts}</div>
      </div>
      <div className={style["progress"]}>
        <div
          onTouchMove={(e) => onTouchMove(e)}
          onTouchStart={(e) => onTouchStart(e)}
          className={style["progress-middle"]}
        >
          <div
            className={style["current-progress"]}
            style={{ width: width }}
          ></div>
        </div>
      </div>
      <div className={style["up"]}>
        <img src={upUrl} alt="" />
      </div>
    </div>
  );
};
